<template>
  <div class="el-custom-from" v-loading="formLoading">
    <el-tabs v-model="activeName" class="node-tabs-kts" @tab-click="FormInit">
      <el-tab-pane name="property">
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-edit"></i>
              {{ this.$t("flowi18n.flow_step_property") }}
            </span>
          </div>
        </template>
        <div id="From_div_style">
          <el-container>
            <el-main id="el-custom-form-main" style="margin-right: 10px">
              <div class="container form-container">
                <el-scrollbar>
                  <el-form
                    ref="propertyData"
                    :model="nodeproperty.meta"
                    label-width="100px"
                    class="demo-ruleForm"
                    size="mini"
                    :rules="rules"
                  >
                    <el-col style="width: 50%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_CnName')"
                        prop="cnName"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="nodeproperty.meta.cnName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 50%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_EnName')"
                        prop="enName"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="nodeproperty.meta.enName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="nodeproperty.meta.prop !== 'endbranch'"
                    >
                      <el-form-item
                        size="small"
                        label="并行分支"
                        prop="line"
                        class="el-from-custom-item"
                      >
                        <el-select
                          v-model="nodeproperty.meta.line"
                          class="m-2"
                          placeholder="选择并行分支"
                        >
                          <el-option
                            v-for="item in branchLines"
                            :key="item.value"
                            :label="item.label"
                            :value="`${item.value + ''}`"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 50%"
                      v-if="
                        nodeproperty.meta.prop !== 'start' &&
                        nodeproperty.meta.prop !== 'end'
                      "
                    >
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_DisplayHistory')"
                        prop="enName"
                        class="el-from-custom-item"
                      >
                        <el-radio-group
                          v-model="nodeproperty.meta.showHistory"
                          size="mini"
                        >
                          <el-radio-button :label="false">{{
                            $t("flowi18n.flow_step_property_UnDisplay")
                          }}</el-radio-button>
                          <el-radio-button :label="true">{{
                            $t("flowi18n.flow_step_property_Display")
                          }}</el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 50%"
                      v-if="
                        nodeproperty.meta.prop !== 'start' &&
                        nodeproperty.meta.prop !== 'end'
                      "
                    >
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_displycomment')"
                      >
                        <el-radio-group
                          v-model="nodeproperty.meta.showOpinion"
                          size="mini"
                        >
                          <el-radio-button :label="false">{{
                            $t("flowi18n.flow_step_property_UnDisplay")
                          }}</el-radio-button>
                          <el-radio-button :label="true">{{
                            $t("flowi18n.flow_step_property_Display")
                          }}</el-radio-button>
                        </el-radio-group>
                        <el-checkbox
                          v-if="nodeproperty.meta.showOpinion"
                          class="flow_step_property_quickApproval"
                          v-model="nodeproperty.meta.required"
                          :label="$t('flowi18n.flow_step_property_requiredComment')"
                          border
                        ></el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 50%"
                      v-if="
                        nodeproperty.meta.prop !== 'start' &&
                        nodeproperty.meta.prop !== 'end'
                      "
                    >
                      <el-form-item size="small">
                        <el-checkbox
                          v-model="nodeproperty.meta.showQuickField"
                          :label="$t('flowi18n.flow_step_property_quickApprova')"
                          border
                        ></el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 50%" v-if="nodeproperty.meta.prop !== 'cc'">
                      <el-form-item size="small">
                        <el-checkbox
                          v-model="nodeproperty.meta.handlerMessage"
                          :label="$t('flowi18n.flow_step_property_ApprovaMessage')"
                          border
                        ></el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 50%" v-if="nodeproperty.meta.prop !== 'cc'">
                      <el-form-item size="small">
                        <el-checkbox
                          v-model="nodeproperty.meta.ccMessage"
                          :label="$t('flowi18n.flow_step_property_ccMessage')"
                          border
                        ></el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="
                        nodeproperty.meta.prop !== 'start' &&
                        nodeproperty.meta.prop !== 'end' &&
                        nodeproperty.meta.showOpinion
                      "
                    >
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_comments')"
                      >
                        <el-input
                          rows="5"
                          v-model="nodeproperty.meta.opinion"
                          maxlength="250"
                          show-word-limit
                          type="textarea"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 100%" v-if="1 == 0">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_bkcomments')"
                      >
                        <el-input
                          rows="5"
                          v-model="nodeproperty.meta.backOpinion"
                          maxlength="250"
                          show-word-limit
                          type="textarea"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 100%" v-if="1 == 0">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_endcomments')"
                      >
                        <el-input
                          rows="5"
                          v-model="nodeproperty.meta.endOpinion"
                          maxlength="250"
                          show-word-limit
                          type="textarea"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 100%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_desc')"
                      >
                        <el-input
                          rows="6"
                          v-model="nodeproperty.meta.note"
                          maxlength="250"
                          show-word-limit
                          type="textarea"
                        />
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-scrollbar>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button plain type="primary" @click="SaveEvent()" size="mini">{{
                  $t("table.Global_Save")
                }}</el-button>

                <el-button plain type="danger" @click="BackEvent()" size="mini">{{
                  $t("table.Global_Back")
                }}</el-button>
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
      <el-tab-pane name="strategy">
        <template #label>
          <div>
            <span class="font_16px flow-el-tab-pane">
              <i class="el-icon-discount"></i>
              {{ this.$t("flowi18n.flow_step_strategy") }}
            </span>
          </div>
        </template>
        <div id="From_div_style">
          <el-container>
            <el-main id="el-custom-form-main" style="margin-right: 10px">
              <div class="container form-container">
                <el-scrollbar>
                  <el-form
                    ref="StrategyData"
                    :model="nodeproperty.strategy"
                    label-width="120px"
                    class="demo-ruleForm"
                    size="mini"
                    :rules="rules"
                  >
                    <el-col style="width: 100%" v-if="nodeproperty.meta.prop !== 'cc'">
                      <el-form-item
                        size="small"
                        class="el-from-custom-item"
                        label-width="140px"
                        :label="$t('flowi18n.flow_step_strategy_isAutoSelectStep_tips')"
                      >
                        <el-checkbox
                          v-model="nodeproperty.strategy.isAutoSelectStep"
                          :label="$t('flowi18n.flow_step_strategy_isAutoSelectStep')"
                          border
                        ></el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="nodeproperty.meta.prop === 'approval'"
                    >
                      <el-form-item
                        size="small"
                        label-width="140px"
                        class="el-from-custom-item"
                        :label="$t('flowi18n.flow_step_strategy_skipStrategy_tips')"
                      >
                        <el-checkbox
                          :disabled="this.isParallel"
                          v-model="nodeproperty.strategy.skipStrategy"
                          :label="$t('flowi18n.flow_step_strategy_skipStrategy')"
                          border
                        ></el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="nodeproperty.meta.prop === 'approval'"
                    >
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_strategy_approvalStrategy')"
                        label-width="140px"
                      >
                        <el-radio-group
                          v-model="nodeproperty.strategy.approvalStrategy"
                          size="mini"
                        >
                          <el-radio-button :label="0" :disabled="this.isSkipNode">
                            {{ $t("flowi18n.flow_step_strategy_approvalStrategy_0") }}
                          </el-radio-button>
                          <el-radio-button :label="1" :disabled="this.isSkipNode">
                            {{ $t("flowi18n.flow_step_strategy_approvalStrategy_1") }}
                          </el-radio-button>
                          <el-radio-button :label="2" :disabled="this.isSkipNode">
                            {{ $t("flowi18n.flow_step_strategy_approvalStrategy_2") }}
                          </el-radio-button>
                          <el-radio-button :label="3" :disabled="this.isSkipNode">
                            按比例处理
                          </el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>

                    <el-col
                      style="width: 100%"
                      v-if="
                        nodeproperty.meta.prop === 'approval' &&
                        nodeproperty.strategy.approvalStrategy == 3
                      "
                    >
                      <el-form-item size="small" label="处理比例" label-width="140px">
                        <el-input
                          v-model="nodeproperty.strategy.nodeApprovalScale"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <div id="处理者策略">
                      <el-col
                        style="width: 100%"
                        v-if="
                          nodeproperty.meta.prop === 'approval' ||
                          nodeproperty.meta.prop === 'cc'
                        "
                      >
                        <el-form-item
                          size="small"
                          :label="$t('flowi18n.flow_step_strategy_strategyType')"
                          label-width="140px"
                        >
                          <el-select
                            v-model="nodeproperty.strategy.strategyType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="strategyTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-if="!isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="$t('flowi18n.flow_step_strategy_type_allpeople')"
                              :value="1"
                            ></el-option>
                            <el-option
                              v-if="isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="$t('flowi18n.flow_step_strategy_type_range')"
                              :value="2"
                            ></el-option>
                            <el-option
                              v-if="isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="
                                $t('flowi18n.flow_step_strategy_type_defaultapprover')
                              "
                              :value="3"
                            ></el-option>
                            <el-option
                              v-if="isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="$t('flowi18n.flow_step_strategy_type_presonnel')"
                              :value="4"
                            ></el-option>
                            <el-option
                              v-if="isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="$t('flowi18n.flow_step_strategy_type_department')"
                              :value="5"
                            ></el-option>
                            <el-option
                              v-if="isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="$t('flowi18n.flow_step_strategy_type_position')"
                              :value="6"
                            ></el-option>
                            <el-option
                              v-if="isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="
                                $t('flowi18n.flow_step_strategy_type_form_personnel')
                              "
                              :value="7"
                            ></el-option>
                            <el-option
                              v-if="isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="
                                $t('flowi18n.flow_step_strategy_type_form_department')
                              "
                              :value="8"
                            ></el-option>
                            <el-option
                              v-if="isAutoSelect || nodeproperty.meta.prop === 'cc'"
                              :label="
                                $t('flowi18n.flow_step_strategy_type_form_position')
                              "
                              :value="9"
                            ></el-option>
                          </el-select>
                          <el-select
                            v-show="nodeproperty.strategy.strategyType == 3"
                            v-model="emps"
                            multiple
                            collapse-tags
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option
                              v-for="item in empconfig"
                              :key="item.empId"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.empId"
                            ></el-option>
                          </el-select>
                          <el-button
                            v-show="nodeproperty.strategy.strategyType == 3"
                            circle
                            icon="el-icon-plus"
                            plain
                            type="primary"
                            @click="dialogAddEmpEvent"
                          ></el-button>
                          <!-- 区域 rangeConfigs -->
                          <el-select
                            v-show="nodeproperty.strategy.strategyType == 2"
                            v-model="range"
                            multiple
                            collapse-tags
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option
                              v-for="item in rangeConfigs"
                              :key="item.positionId"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.positionId"
                            ></el-option>
                          </el-select>
                          <el-button
                            v-show="nodeproperty.strategy.strategyType == 2"
                            circle
                            icon="el-icon-plus"
                            plain
                            type="primary"
                            @click="dialogAddPositionEvent"
                          ></el-button>
                          <!-- 按人员 -->
                          <el-select
                            v-if="nodeproperty.strategy.strategyType == 4"
                            v-model="nodeproperty.strategy.approverType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="approverTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-for="item in conf.staretgy_personnal"
                              :key="item.value"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <!-- 按部门 -->
                          <el-select
                            v-if="nodeproperty.strategy.strategyType == 5"
                            v-model="nodeproperty.strategy.approverType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="approverTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-for="item in conf.staretgy_orgs"
                              :key="item.value"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <!-- 按职位 -->
                          <el-select
                            v-if="nodeproperty.strategy.strategyType == 6"
                            v-model="nodeproperty.strategy.approverType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="approverTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-for="item in conf.staretgy_poss"
                              :key="item.value"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <!-- 表单人员字段 -->
                          <el-select
                            v-if="nodeproperty.strategy.strategyType == 7"
                            v-model="nodeproperty.strategy.formField"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="formFieldTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <div v-for="item in formInfo.areas" :key="item.id">
                              <div v-for="oitem in item.fields" :key="oitem.id">
                                <el-option
                                  v-if="oitem.controlStype == 'employee'"
                                  :label="
                                    this.$i18n.locale === 'zh-cn'
                                      ? oitem.cnName
                                      : oitem.enName
                                  "
                                  :value="oitem.fieldKey"
                                ></el-option>
                              </div>
                            </div>
                          </el-select>
                          <!-- 表单部门字段 -->
                          <el-select
                            v-if="nodeproperty.strategy.strategyType == 8"
                            v-model="nodeproperty.strategy.formField"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="formFieldTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <div v-for="item in formInfo.areas" :key="item.id">
                              <div v-for="oitem in item.fields" :key="oitem.id">
                                <el-option
                                  v-if="oitem.controlStype == 'organizational'"
                                  :label="
                                    this.$i18n.locale === 'zh-cn'
                                      ? oitem.cnName
                                      : oitem.enName
                                  "
                                  :value="oitem.fieldKey"
                                ></el-option>
                              </div>
                            </div>
                          </el-select>
                          <!-- 表单职位字段 -->
                          <el-select
                            v-if="nodeproperty.strategy.strategyType == 9"
                            v-model="nodeproperty.strategy.formField"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="formFieldTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              value
                            ></el-option>
                            <div v-for="item in formInfo.areas" :key="item.id">
                              <div v-for="oitem in item.fields" :key="oitem.id">
                                <el-option
                                  v-if="oitem.controlStype == 'position'"
                                  :label="
                                    this.$i18n.locale === 'zh-cn'
                                      ? oitem.cnName
                                      : oitem.enName
                                  "
                                  :value="oitem.fieldKey"
                                ></el-option>
                              </div>
                            </div>
                          </el-select>
                          <!-- 字段策略类型 -->
                          <el-select
                            v-if="showformFieldApproveType"
                            v-model="nodeproperty.strategy.formFieldApproveType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="formFieldApproveTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-for="item in FieldApproveTypes"
                              :key="item.value"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <!-- 上N级部门负责人 -->
                          <el-select
                            style="width: 60px"
                            v-if="
                              (nodeproperty.strategy.strategyType == 5 &&
                                nodeproperty.strategy.approverType <= 12 &&
                                nodeproperty.strategy.approverType >= 10) ||
                              (nodeproperty.strategy.strategyType == 8 &&
                                nodeproperty.strategy.formFieldApproveType == 3)
                            "
                            v-model="nodeproperty.strategy.orgLeve"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option :label="0" :value="0"></el-option>
                            <el-option
                              v-for="item in 50"
                              :key="item"
                              :label="item"
                              :value="item"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col
                        style="width: 50%"
                        v-if="
                          nodeproperty.strategy.strategyType == 6 ||
                          nodeproperty.strategy.strategyType == 9 ||
                          (nodeproperty.strategy.strategyType == 5 &&
                            nodeproperty.strategy.approverType <= 6 &&
                            nodeproperty.strategy.approverType >= 1) ||
                          (nodeproperty.strategy.strategyType == 8 &&
                            nodeproperty.strategy.formFieldApproveType == 2)
                        "
                      >
                        <el-form-item
                          size="small"
                          :label="
                            $t('flowi18n.flow_step_strateg_currenttask_parttimeposition')
                          "
                          label-width="140px"
                        >
                          <el-select
                            v-model="nodeproperty.strategy.sendParttimePostion"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currenttask_parttimeposition_main'
                                )
                              "
                              :value="1"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currenttask_parttimeposition_part'
                                )
                              "
                              :value="2"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col
                        style="width: 50%"
                        v-if="
                          nodeproperty.strategy.strategyType == 6 ||
                          nodeproperty.strategy.strategyType == 9 ||
                          (nodeproperty.strategy.strategyType == 5 &&
                            nodeproperty.strategy.approverType <= 6 &&
                            nodeproperty.strategy.approverType >= 1) ||
                          (nodeproperty.strategy.strategyType == 8 &&
                            nodeproperty.strategy.formFieldApproveType == 2)
                        "
                      >
                        <el-form-item
                          size="small"
                          :label="
                            $t('flowi18n.flow_step_strateg_currentstep_parttimeposition')
                          "
                          label-width="140px"
                        >
                          <el-select
                            v-model="nodeproperty.strategy.approveParttimePostion"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currentstep_parttimeposition_main'
                                )
                              "
                              :value="1"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currentstep_parttimeposition_part'
                                )
                              "
                              :value="2"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currentstep_parttimeposition_main_yx'
                                )
                              "
                              :value="3"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currentstep_parttimeposition_part_yx'
                                )
                              "
                              :value="4"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div id="抄送者策略" v-if="nodeproperty.meta.prop !== 'cc'">
                      <el-col style="width: 100%">
                        <el-form-item
                          size="small"
                          :label="$t('flowi18n.flow_step_strategy_cc_strategyType')"
                          label-width="140px"
                        >
                          <el-select
                            v-model="nodeproperty.strategy.ccStrategyType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="ccStrategyTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              :label="$t('flowi18n.flow_step_strategy_type_allpeople')"
                              :value="1"
                            ></el-option>
                            <el-option
                              :label="
                                $t('flowi18n.flow_step_strategy_type_defaultapprover')
                              "
                              :value="3"
                            ></el-option>
                            <el-option
                              :label="$t('flowi18n.flow_step_strategy_type_presonnel')"
                              :value="4"
                            ></el-option>
                            <el-option
                              :label="$t('flowi18n.flow_step_strategy_type_department')"
                              :value="5"
                            ></el-option>
                            <el-option
                              :label="$t('flowi18n.flow_step_strategy_type_position')"
                              :value="6"
                            ></el-option>
                            <el-option
                              :label="
                                $t('flowi18n.flow_step_strategy_type_form_personnel')
                              "
                              :value="7"
                            ></el-option>
                            <el-option
                              :label="
                                $t('flowi18n.flow_step_strategy_type_form_department')
                              "
                              :value="8"
                            ></el-option>
                            <el-option
                              :label="
                                $t('flowi18n.flow_step_strategy_type_form_position')
                              "
                              :value="9"
                            ></el-option>
                          </el-select>
                          <el-select
                            v-show="nodeproperty.strategy.ccStrategyType == 3"
                            v-model="ccemps"
                            multiple
                            collapse-tags
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option
                              v-for="item in ccempconfig"
                              :key="item.empId"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.empId"
                            ></el-option>
                          </el-select>
                          <el-button
                            v-show="nodeproperty.strategy.ccStrategyType == 3"
                            circle
                            icon="el-icon-plus"
                            plain
                            type="primary"
                            @click="dialogAddCCEmpEvent"
                          ></el-button>
                          <!-- 按人员 -->
                          <el-select
                            v-if="nodeproperty.strategy.ccStrategyType == 4"
                            v-model="nodeproperty.strategy.ccType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="CCTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-for="item in conf.staretgy_personnal"
                              :key="item.value"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <!-- 按部门 -->
                          <el-select
                            v-if="nodeproperty.strategy.ccStrategyType == 5"
                            v-model="nodeproperty.strategy.ccType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="CCTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-for="item in conf.staretgy_orgs"
                              :key="item.value"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <!-- 按职位 -->
                          <el-select
                            v-if="nodeproperty.strategy.ccStrategyType == 6"
                            v-model="nodeproperty.strategy.ccType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="CCTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-for="item in conf.staretgy_poss"
                              :key="item.value"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <!-- 表单人员字段 -->
                          <el-select
                            v-if="nodeproperty.strategy.ccStrategyType == 7"
                            v-model="nodeproperty.strategy.ccFormField"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="CCFormFieldTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <div v-for="item in formInfo.areas" :key="item.id">
                              <div v-for="oitem in item.fields" :key="oitem.id">
                                <el-option
                                  v-if="oitem.controlStype == 'employee'"
                                  :label="
                                    this.$i18n.locale === 'zh-cn'
                                      ? oitem.cnName
                                      : oitem.enName
                                  "
                                  :value="oitem.fieldKey"
                                ></el-option>
                              </div>
                            </div>
                          </el-select>
                          <!-- 表单部门字段 -->
                          <el-select
                            v-if="nodeproperty.strategy.ccStrategyType == 8"
                            v-model="nodeproperty.strategy.ccFormField"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="CCFormFieldTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <div v-for="item in formInfo.areas" :key="item.id">
                              <div v-for="oitem in item.fields" :key="oitem.id">
                                <el-option
                                  v-if="oitem.controlStype == 'organizational'"
                                  :label="
                                    this.$i18n.locale === 'zh-cn'
                                      ? oitem.cnName
                                      : oitem.enName
                                  "
                                  :value="oitem.fieldKey"
                                ></el-option>
                              </div>
                            </div>
                          </el-select>
                          <!-- 表单职位字段 -->
                          <el-select
                            v-if="nodeproperty.strategy.ccStrategyType == 9"
                            v-model="nodeproperty.strategy.ccFormField"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="CCFormFieldTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              value
                            ></el-option>
                            <div v-for="item in formInfo.areas" :key="item.id">
                              <div v-for="oitem in item.fields" :key="oitem.id">
                                <el-option
                                  v-if="oitem.controlStype == 'position'"
                                  :label="
                                    this.$i18n.locale === 'zh-cn'
                                      ? oitem.cnName
                                      : oitem.enName
                                  "
                                  :value="oitem.fieldKey"
                                ></el-option>
                              </div>
                            </div>
                          </el-select>
                          <!-- 字段策略类型 -->
                          <el-select
                            v-if="ccShowformFieldApproveType"
                            v-model="nodeproperty.strategy.ccFormFieldApproveType"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                            @change="CCFormFieldApproveTypeChange"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              v-for="item in ccFieldApproveTypes"
                              :key="item.value"
                              :label="
                                this.$i18n.locale === 'zh-cn' ? item.cnName : item.enName
                              "
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <!-- 上N级部门负责人 -->
                          <el-select
                            style="width: 60px"
                            v-if="
                              (nodeproperty.strategy.ccStrategyType == 5 &&
                                nodeproperty.strategy.ccType <= 12 &&
                                nodeproperty.strategy.ccType >= 10) ||
                              (nodeproperty.strategy.ccStrategyType == 8 &&
                                nodeproperty.strategy.ccFormFieldApproveType == 3)
                            "
                            v-model="nodeproperty.strategy.ccOrgLeve"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option :label="0" :value="0"></el-option>
                            <el-option
                              v-for="item in 50"
                              :key="item"
                              :label="item"
                              :value="item"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col
                        style="width: 50%"
                        v-if="
                          nodeproperty.strategy.ccStrategyType == 6 ||
                          nodeproperty.strategy.ccStrategyType == 9 ||
                          (nodeproperty.strategy.ccStrategyType == 5 &&
                            nodeproperty.strategy.ccType <= 6 &&
                            nodeproperty.strategy.ccType >= 1) ||
                          (nodeproperty.strategy.ccStrategyType == 8 &&
                            nodeproperty.strategy.ccFormFieldApproveType == 2)
                        "
                      >
                        <el-form-item
                          size="small"
                          :label="
                            $t('flowi18n.flow_step_strateg_currenttask_parttimeposition')
                          "
                          label-width="140px"
                        >
                          <el-select
                            v-model="nodeproperty.strategy.ccSendParttimePostion"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currenttask_parttimeposition_main'
                                )
                              "
                              :value="1"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currenttask_parttimeposition_part'
                                )
                              "
                              :value="2"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col
                        style="width: 50%"
                        v-if="
                          nodeproperty.strategy.ccStrategyType == 6 ||
                          nodeproperty.strategy.ccStrategyType == 9 ||
                          (nodeproperty.strategy.ccStrategyType == 5 &&
                            nodeproperty.strategy.ccType <= 6 &&
                            nodeproperty.strategy.ccType >= 1) ||
                          (nodeproperty.strategy.ccStrategyType == 8 &&
                            nodeproperty.strategy.ccFormFieldApproveType == 2)
                        "
                      >
                        <el-form-item
                          size="small"
                          :label="
                            $t('flowi18n.flow_step_strateg_currentstep_parttimeposition')
                          "
                          label-width="140px"
                        >
                          <el-select
                            v-model="nodeproperty.strategy.ccApproveParttimePostion"
                            size="mini"
                            :placeholder="$t('formi18n.field_property_selectType_select')"
                          >
                            <el-option
                              :label="$t('formi18n.field_property_selectType_select')"
                              :value="0"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currentstep_parttimeposition_main'
                                )
                              "
                              :value="1"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currentstep_parttimeposition_part'
                                )
                              "
                              :value="2"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currentstep_parttimeposition_main_yx'
                                )
                              "
                              :value="3"
                            ></el-option>
                            <el-option
                              :label="
                                $t(
                                  'flowi18n.flow_step_strategy_currentstep_parttimeposition_part_yx'
                                )
                              "
                              :value="4"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </div>
                  </el-form>
                </el-scrollbar>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button plain type="primary" @click="SaveEvent()" size="mini">{{
                  $t("table.Global_Save")
                }}</el-button>

                <el-button plain type="danger" @click="BackEvent()" size="mini">{{
                  $t("table.Global_Back")
                }}</el-button>
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
      <el-tab-pane name="form">
        <template #label>
          <div>
            <span class="font_16px flow-el-tab-pane">
              <i class="el-icon-lx-copy"></i>
              {{ this.$t("flowi18n.flow_step_form") }}
            </span>
          </div>
        </template>
        <div id="From_div_style">
          <el-container class="custom-el-main">
            <el-main id="el-custom-form-main" style="margin-right: 10px">
              <div class="container form-container">
                <el-scrollbar>
                  <div class="title" v-for="element in formInfo.areas" :key="element.id">
                    <el-card
                      :class="element.usable ? 'box-card' : 'box-card-danger'"
                      style="min-height: 100px"
                    >
                      <template #header>
                        <div
                          :class="element.usable ? 'card-header' : 'card-header-danger'"
                        >
                          <span class="el-field-area-text">
                            <i class="el-icon-postcard"></i>
                            {{
                              $i18n.locale === "zh-cn"
                                ? element.areaCNName
                                : element.areaENName
                            }}
                          </span>
                          <el-tooltip
                            placement="right-start"
                            v-if="element.mainTable == ''"
                            effect="light"
                          >
                            <template #content>
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px"
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables") }}：{{ element.areaCNName }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px"
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables_en") }}：{{
                                  element.areaENName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px"
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_main") }}：{{ element.tableCode }}
                              </el-tag>
                            </template>
                            <el-tag
                              size="mini"
                              :type="element.usable ? '' : 'danger'"
                              style="margin-left: 5px"
                              effect="dark"
                              >{{ $t("formi18n.form_main") }}</el-tag
                            >
                          </el-tooltip>
                          <el-tooltip placement="right-start" v-else effect="light">
                            <template #content>
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px"
                                :type="element.usable ? 'warning' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables") }}：{{
                                  element.mainTableName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px"
                                :type="element.usable ? 'warning' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables_en") }}：{{
                                  element.mainTableENName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px"
                                :type="element.usable ? 'warning' : 'danger'"
                              >
                                {{ $t("formi18n.form_main") }}：{{ element.mainTable }}
                              </el-tag>
                            </template>
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px"
                              :type="element.usable ? 'warning' : 'danger'"
                              >{{ $t("formi18n.form_child_table") }}</el-tag
                            >
                          </el-tooltip>

                          <el-checkbox
                            v-if="nodeproperty.meta.prop !== 'cc'"
                            style="margin-right: 10px; float: right"
                            v-model="element.editor"
                            :label="$t('formi18n.field_property_edit')"
                            :disabled="!element.show"
                            size="mini"
                            @change="changAreaEdit(element)"
                          ></el-checkbox>
                          <el-checkbox
                            style="margin-right: 10px; float: right"
                            v-model="element.show"
                            :label="$t('flowi18n.flow_step_property_Display')"
                            @change="changAreaShow(element)"
                            size="mini"
                          ></el-checkbox>
                        </div>
                      </template>
                      <el-scrollbar style="height: 230px">
                        <el-form size="mini">
                          <div v-for="(item, index) in element.fields" :key="index">
                            <el-col
                              :class="
                                element.usable
                                  ? 'el-field-area-close'
                                  : 'el-field-area-close-danger'
                              "
                              :style="'width:100%'"
                            >
                              <el-form-item
                                :label="
                                  $i18n.locale == 'zh-cn' ? item.cnName : item.enName
                                "
                                label-position="left"
                                label-width="180px"
                                :class="
                                  element.usable && item.usable
                                    ? 'el-feild-fields-item'
                                    : 'el-feild-fields-delete-item '
                                "
                              >
                                <el-input :disabled="1 == 1"></el-input>
                                <el-checkbox
                                  style="margin-right: 0"
                                  v-model="item.show"
                                  :label="$t('flowi18n.flow_step_property_Display')"
                                  border
                                  @change="changFieldShow(item)"
                                  :disabled="!element.show"
                                  size="mini"
                                ></el-checkbox>
                                <el-checkbox
                                  v-if="nodeproperty.meta.prop !== 'cc'"
                                  style="margin-right: 0"
                                  v-model="item.editor"
                                  :label="$t('formi18n.field_property_edit')"
                                  border
                                  size="mini"
                                  @change="changFieldEdit(item)"
                                  :disabled="!item.show || !element.editor"
                                ></el-checkbox>
                                <el-checkbox
                                  v-if="nodeproperty.meta.prop !== 'cc'"
                                  style="margin-right: 0"
                                  size="mini"
                                  v-model="item.required"
                                  :label="
                                    $t('formi18n.field_property_selectType_required')
                                  "
                                  border
                                  :disabled="
                                    !item.show || !item.editor || !element.editor
                                  "
                                ></el-checkbox>
                              </el-form-item>
                            </el-col>
                          </div>
                        </el-form>
                      </el-scrollbar>
                    </el-card>
                  </div>
                </el-scrollbar>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button plain type="primary" @click="SaveEvent()" size="mini">{{
                  $t("table.Global_Save")
                }}</el-button>

                <el-button plain type="danger" @click="BackEvent()" size="mini">{{
                  $t("table.Global_Back")
                }}</el-button>
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
      <el-tab-pane name="button">
        <template #label>
          <div>
            <span class="font_16px flow-el-tab-pane">
              <i class="el-icon-lx-link"></i>
              {{ this.$t("flowi18n.flow_step_button") }}
            </span>
          </div>
        </template>
        <div id="From_div_style">
          <el-container>
            <el-main id="el-custom-form-main" style="margin-right: 10px">
              <div class="container form-container">
                <el-form size="mini">
                  <el-col style="width: 50%">
                    <el-card class="box-card el-btn-box-card-left">
                      <template #header>
                        <div class="card-header">
                          <span>
                            {{ $t("flowi18n.flow_step_property_buttons_Source") }}
                          </span>
                        </div>
                      </template>
                      <div v-for="option in btnList" :key="option">
                        <el-button
                          :type="option.style"
                          :icon="option.icon"
                          size="mini"
                          style="margin-top: 5px"
                          :disabled="option.diabled"
                        >
                          {{
                            this.$i18n.locale == "zh-cn" ? option.cnName : option.enName
                          }}
                        </el-button>
                        <el-button
                          icon="el-icon-plus"
                          style="float: right"
                          type="primary"
                          size="mini"
                          circle
                          plain
                          :disabled="option.diabled"
                          @click="addbtn(option)"
                        ></el-button>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col style="width: 50%">
                    <el-card class="box-card el-btn-box-card-right">
                      <template #header>
                        <div class="card-header">
                          <span>
                            {{ $t("flowi18n.flow_step_property_buttons_Target") }}
                          </span>
                        </div>
                      </template>
                      <draggable
                        :list="nodeproperty.btns"
                        dragable="true"
                        :animation="100"
                        :forceFallback="true"
                        item-key="areaSeq"
                      >
                        <template #item="{ element }">
                          <div>
                            <el-button
                              :type="element.style"
                              :icon="element.icon"
                              size="mini"
                              style="margin-top: 5px"
                              @click="btnPorperty(element)"
                            >
                              {{
                                this.$i18n.locale == "zh-cn"
                                  ? element.cnName
                                  : element.enName
                              }}
                            </el-button>
                            <el-button
                              icon="el-icon-delete"
                              style="float: right"
                              type="danger"
                              size="mini"
                              circle
                              plain
                              @click="btnRemove(element)"
                            ></el-button>
                          </div>
                        </template>
                      </draggable>
                    </el-card>
                  </el-col>
                  <el-col style="width: 100%">
                    <el-card class="box-card el-btn-box-card-btn">
                      <template #header>
                        <div class="card-header">
                          <span>
                            {{ $t("flowi18n.flow_step_property_buttons_porperty") }}
                          </span>
                        </div>
                      </template>
                      <el-scrollbar>
                        <el-form
                          ref="propertyData"
                          :model="btnInfo"
                          label-width="100px"
                          class="demo-ruleForm"
                          size="mini"
                        >
                          <el-col style="width: 100%">
                            <el-form-item
                              size="small"
                              :label="$t('flowi18n.flow_line_property_CnName')"
                              class="el-from-custom-item"
                            >
                              <el-input v-model="btnInfo.cnName"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col style="width: 100%">
                            <el-form-item
                              size="small"
                              :label="$t('flowi18n.flow_step_property_EnName')"
                              class="el-from-custom-item"
                            >
                              <el-input v-model="btnInfo.enName"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col style="width: 100%">
                            <el-form-item
                              size="small"
                              :label="$t('flowi18n.flow_property_svg_icon')"
                              class="el-from-custom-item"
                            >
                              <el-button
                                :type="btnInfo.style"
                                v-if="
                                  btnInfo.icon != '' &&
                                  btnInfo.icon != null &&
                                  btnInfo.icon != undefined
                                "
                                :icon="btnInfo.icon"
                                >{{ btnInfo.icon }}</el-button
                              >
                            </el-form-item>
                          </el-col>
                          <el-col style="width: 100%">
                            <el-form-item
                              size="small"
                              :label="$t('flowi18n.flow_button_property_placeholder')"
                              class="el-from-custom-item"
                            >
                              <el-input
                                rows="4"
                                v-model="btnInfo.toolTips"
                                maxlength="200"
                                show-word-limit
                                type="textarea"
                              />
                            </el-form-item>
                          </el-col>
                        </el-form>
                      </el-scrollbar>
                    </el-card>
                  </el-col>
                </el-form>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button plain type="primary" @click="SaveEvent()" size="mini">{{
                  $t("table.Global_Save")
                }}</el-button>

                <el-button plain type="danger" @click="BackEvent()" size="mini">{{
                  $t("table.Global_Back")
                }}</el-button>
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="el-dialog-content">
      <dialog-employee-componet-vue
        ref="emp"
        @confirmEvent="dialogEmpConfirmEvent"
      ></dialog-employee-componet-vue>
      <dialog-position-componet-vue
        ref="pos"
        @confirmEvent="dialogPostConfirmEvent"
      ></dialog-position-componet-vue>
    </div>
  </div>
</template>

<script>
import flowConfig from "../assets/config/model.json";
import Draggable from "vuedraggable";
import reqVue from "../utils/req.vue";
import confVue from "../utils/conf.vue";
import DialogEmployeeComponetVue from "./DialogEmployeeComponet.vue";
import DialogPositionComponetVue from "./DialogPositionComponet.vue";

let windowHeight = parseInt(window.innerHeight);
export default {
  props: {
    oldproperty: {
      type: Object,
      default: () => ({}),
    },
    bindproperty: {
      type: Object,
      default: () => ({}),
    },
    stepproperty: {
      type: Object,
      default: () => ({}),
    },
    formList: {
      type: Array,
      default: () => [],
    },
    flowTypes: {
      type: Array,
      default: () => [],
    },
    formversionid: {
      type: Number,
      default: () => 0,
    },
    isAutoSelect: {
      type: Boolean,
      default: () => false,
    },
    flowversionid: {
      type: Number,
      default: () => 0,
    },
    isParallel: {
      type: Boolean,
      default: () => false,
    },
    isSkipNode: {
      type: Boolean,
      default: () => false,
    },
    branchs: {
      type: Array,
      default: () => [],
    },
    lines: {
      type: Array,
      default: () => [],
    },
  },
  name: "flow-node-property",
  data() {
    return {
      newBranchs: this.branchs,
      newLines: this.lines,
      branchLines: [],
      ccShowformFieldApproveType: false,
      showformFieldApproveType: false,
      FieldApproveTypes: [],
      ccFieldApproveTypes: [],
      formLoading: false,
      newNode: this.stepproperty,
      nodeproperty: this.bindproperty,
      oldnode: this.oldproperty,
      apipath: "flowinfo",
      way: confVue.$flowApi,
      emps: [],
      empconfig: [],
      range: [],
      rangeConfigs: [],
      ccemps: [],
      ccempconfig: [],
      ccrange: [],
      rangeCCConfigs: [],
      btnInfo: {},
      formInfo: {},
      autoHeight: {
        height: "",
        width: "97%",
        margin: "11px",
        float: "left",
      },
      contentHeight: {
        height: "",
      },
      activeName: "property",
      ///数据验证规则
      rules: {
        cnName: [
          {
            min: 1,
            max: 50,
            message: this.$t("errori18n.err_flow_CNName_length"),
            trigger: "blur",
          },
          {
            required: true,
            message: this.$t("errori18n.err_flow_CNName"),
            trigger: "blur",
          },
        ],
        enName: [
          {
            min: 1,
            max: 50,
            message: this.$t("errori18n.err_flow_ENName_length"),
            trigger: "blur",
          },
          {
            required: true,
            message: this.$t("errori18n.err_flow_ENName"),
            trigger: "blur",
          },
        ],
        flowType: [
          {
            required: true,
            message: this.$t("errori18n.err_flow_flowType"),
            trigger: "change",
          },
        ],
        formId: [
          {
            required: true,
            message: this.$t("errori18n.err_flow_formId"),
            trigger: "change",
          },
        ],
      },
      conf: flowConfig.conf,
      btnList:
        this.bindproperty.meta.prop === "cc"
          ? flowConfig.conf.ccbtns
          : this.bindproperty.meta.prop === "start"
          ? flowConfig.conf.applybtns
          : flowConfig.conf.flowbtns,
    };
  },

  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 200 + "px";
      if (
        this.nodeproperty.strategy.strategyType == 3 ||
        this.nodeproperty.strategy.strategyType == 2
      ) {
        this.formStrategyInit();
      }
      if (this.nodeproperty.strategy.ccStrategyType == 7) {
        this.ccFieldApproveTypes = this.conf.strategy_current_field_personnal;
      }
      if (this.nodeproperty.strategy.ccStrategyType == 8) {
        this.ccFieldApproveTypes = this.conf.strategy_current_field_orgs;
      }
      if (this.nodeproperty.strategy.ccStrategyType == 9) {
        this.ccFieldApproveTypes = this.conf.strategy_current_field_poss;
      }

      if (this.nodeproperty.strategy.strategyType == 7) {
        this.FieldApproveTypes = this.conf.strategy_current_field_personnal;
      }
      if (this.nodeproperty.strategy.strategyType == 8) {
        this.FieldApproveTypes = this.conf.strategy_current_field_orgs;
      }
      if (this.nodeproperty.strategy.strategyType == 9) {
        this.FieldApproveTypes = this.conf.strategy_current_field_poss;
      }
      if (
        this.nodeproperty.strategy.strategyType <= 9 &&
        this.nodeproperty.strategy.strategyType >= 7
      ) {
        this.initForm();
        this.showformFieldApproveType = true;
      }
      if (
        this.nodeproperty.strategy.ccStrategyType <= 9 &&
        this.nodeproperty.strategy.ccStrategyType >= 7
      ) {
        this.initForm();
        this.ccShowformFieldApproveType = true;
      }
    },
    SelectFlowIcon() {
      this.$refs.dialogFlowIcon.dialogFlowIocnVisible = true;
      this.$refs.dialogFlowIcon.icon = this.dataproperty.icon;
      this.$refs.dialogFlowIcon.background = this.dataproperty.background;
    },
    confirmEvent(icon) {
      this.dataproperty.icon = icon;
    },
    tableEvent(item) {
      this.dialogAddEvent(item);
      this.dialogDeleteEvent(item);
    },
    dialogAddEvent(item) {
      if (item.data.value === "add") {
        this.$refs.emp.paramters = {
          fieldKey: item.key,
          data: this.dataproperty[item.key.fieldKey],
          exceptDataField: [],
        };
        this.$refs.emp.dialogEmpVisible = true;
        this.$refs.emp.InitData();
      }
    },
    dialogDeleteEvent(item) {
      let data = this.dataproperty;
      if (item.data.value === "delete") {
        let tables = this.$refs[item.key.fieldKey + "_multipleTable"].tableResult;
        tables.forEach((element) => {
          var index = data[item.key.fieldKey].indexOf(element);
          if (index !== -1) {
            data[item.key.fieldKey].splice(index, 1);
          }
        });
      }
    },
    SaveEvent() {
      this.$refs["propertyData"].validate((valid) => {
        if (valid) {
          this.saveData(this.nodeproperty);
          this.$emit("FlowNodePropetryEvent");
        } else {
          return false;
        }
      });
    },
    BackEvent() {
      this.saveData(this.oldproperty);
      this.$emit("FlowNodePropetryEvent");
    }, ///初始化节点属性
    saveData(property) {
      const Lines = property.meta.line || "";
      console.log("tag", Lines);
      let groups = "";
      if (Lines != "") {
        let arryGroup = [];
        const grs = Lines.split("$");
        grs.forEach((element) => {
          if ((element != null) & (element != "")) {
            const gline = element.split("#");
            if (gline.length > 0) {
              if (gline[0] != null && gline[0] != "") {
                arryGroup.push({
                  branch: gline[0],
                  line: "",
                });
                arryGroup.push({
                  branch: gline[0],
                  line: gline[1],
                });
              }
            }
          }
        });
        if (arryGroup.length > 0) groups = JSON.stringify(arryGroup);
      }

      this.newNode.meta.cnName = property.meta.cnName;
      this.newNode.meta.enName = property.meta.enName;
      this.newNode.meta.showQuickField = property.meta.showQuickField;
      this.newNode.meta.showHistory = property.meta.showHistory;
      this.newNode.meta.opinion = property.meta.opinion;
      this.newNode.meta.backOpinion = property.meta.backOpinion;
      this.newNode.meta.endOpinion = property.meta.endOpinion;
      this.newNode.meta.showOpinion = property.meta.showOpinion;
      this.newNode.meta.required = property.meta.required;
      this.newNode.meta.handlerMessage = property.meta.handlerMessage;
      this.newNode.meta.ccMessage = property.meta.ccMessage;
      this.newNode.meta.note = property.meta.note;
      this.newNode.meta.groups = groups;
      this.newNode.meta.startGroup = property.meta.startGroup;

      this.newNode.meta.backScale = property.meta.backScale;
      this.newNode.meta.approvalScale = property.meta.approvalScale;
      this.newNode.meta.backStrategy = property.meta.backStrategy;
      this.newNode.meta.branchStrategy = property.meta.branchStrategy;
      this.newNode.meta.endScale = property.meta.endScale;
      this.newNode.meta.endStrategy = property.meta.endStrategy;
      this.newNode.meta.branchTag = property.meta.branchTag;
      this.newNode.meta.line = property.meta.line || "";
      ///策略
      this.newNode.strategy.isAutoSelectStep = property.strategy.isAutoSelectStep;
      this.newNode.strategy.approvalStrategy = property.strategy.approvalStrategy;
      this.newNode.strategy.skipStrategy = property.strategy.skipStrategy;
      this.newNode.strategy.strategyType = property.strategy.strategyType;
      this.newNode.strategy.approveParttimePostion =
        property.strategy.approveParttimePostion;
      this.newNode.strategy.sendParttimePostion = property.strategy.sendParttimePostion;
      this.newNode.strategy.approverType = property.strategy.approverType;
      this.newNode.strategy.formField = property.strategy.formField;
      this.newNode.strategy.formFieldApproveType = property.strategy.formFieldApproveType;
      this.newNode.strategy.appoverRange = this.range.join(",");
      this.newNode.strategy.defaultApprover = this.emps.join(",");
      this.newNode.strategy.orgLeve = property.strategy.orgLeve;
      this.newNode.strategy.ccStrategyType = property.strategy.ccStrategyType;
      this.newNode.strategy.ccApproveParttimePostion =
        property.strategy.ccApproveParttimePostion;
      this.newNode.strategy.ccSendParttimePostion =
        property.strategy.ccSendParttimePostion;
      this.newNode.strategy.ccType = property.strategy.ccType;
      this.newNode.strategy.ccFormFieldApproveType =
        property.strategy.ccFormFieldApproveType;
      this.newNode.strategy.nodeApprovalScale = property.strategy.nodeApprovalScale;
      this.newNode.strategy.nodeBackScale = property.strategy.nodeBackScale;
      this.newNode.strategy.nodeBackStrategy = property.strategy.nodeBackStrategy;
      this.newNode.strategy.nodeEndScale = property.strategy.nodeEndScale;
      this.newNode.strategy.nodeEndStrategy = property.strategy.nodeEndStrategy;
      this.newNode.strategy.ccFormField = property.strategy.ccFormField;
      this.newNode.strategy.ccUser = this.ccemps.join(",");
      this.newNode.strategy.ccOrgLeve = property.strategy.ccOrgLeve;
      this.newNode.btns = property.btns;
      this.newNode.form = this.formInfo;
    },
    ///添加到按钮
    addbtn(btn) {
      btn.diabled = true;
      this.nodeproperty.btns.push({
        btnCode: btn.btnCode,
        cnName: btn.cnName,
        enName: btn.enName,
        icon: btn.icon,
        toolTips: btn.toolTips,
        style: btn.style,
      });
      console.log(btn);
    },
    ///移除按钮
    btnRemove(btn) {
      this.nodeproperty.btns = this.nodeproperty.btns.filter(
        (o) => o.btnCode !== btn.btnCode
      );
      this.btnList
        .filter((o) => o.btnCode === btn.btnCode)
        .forEach((element) => {
          element.diabled = false;
        });
      if (this.nodeproperty.btns.length == 0) this.btnInfo = {};
    },
    ///按钮属性
    btnPorperty(btn) {
      this.btnInfo = btn;
    },
    ///按钮是否可选
    InitBtn() {
      this.btnList.forEach((o) => {
        o.diabled =
          this.nodeproperty.btns.filter((b) => b.btnCode == o.btnCode).length > 0;
      });
    },
    ///初始化表单字段
    FormInit(tab) {
      if (tab.props.name == "form") {
        this.initForm();
      } else if (tab.props.name == "strategy") {
        this.formStrategyInit();
        this.ccformStrategyInit();
      }
    },
    ///初始化测略
    formStrategyInit() {
      if (
        this.nodeproperty.strategy.strategyType == 3 ||
        this.nodeproperty.strategy.strategyType == 2
      ) {
        let viewurl = "";
        if (
          this.nodeproperty.strategy.strategyType == 3 &&
          this.nodeproperty.strategy.defaultApprover != null &&
          this.nodeproperty.strategy.defaultApprover != ""
        )
          viewurl =
            this.apipath + "/v1.0/flowemps/" + this.nodeproperty.strategy.defaultApprover;
        if (
          this.nodeproperty.strategy.strategyType == 2 &&
          this.nodeproperty.strategy.appoverRange != null &&
          this.nodeproperty.strategy.appoverRange != ""
        )
          viewurl =
            this.apipath + "/v1.0/flowpos/" + this.nodeproperty.strategy.appoverRange;
        if (viewurl !== "") {
          reqVue.$Post(null, viewurl, this.way).then(
            function (data) {
              if (data.status) {
                if (this.nodeproperty.strategy.strategyType == 3) {
                  this.emps = [];
                  this.empconfig = [];
                  data.body.forEach((element) => {
                    this.emps.push(element.empId);
                    this.empconfig.push({
                      empId: element.empId,
                      cnName: element.cnName,
                      enName: element.enName,
                    });
                  });
                }
                if (this.nodeproperty.strategy.strategyType == 2) {
                  this.range = [];
                  this.rangeConfigs = [];
                  data.body.forEach((element) => {
                    this.range.push(element.positionId);
                    this.rangeConfigs.push({
                      positionId: element.positionId,
                      cnName: element.cnName,
                      enName: element.enName,
                    });
                  });
                }
              } else {
                this.$message.error(data.message);
                this.formLoading = false;
              }
            }.bind(this)
          );
        }
      }
    },
    ccformStrategyInit() {
      if (this.nodeproperty.strategy.strategyType == 3) {
        let viewurl = "";
        if (
          this.nodeproperty.strategy.ccFtrategyType == 3 &&
          this.nodeproperty.strategy.ccUser != null &&
          this.nodeproperty.strategy.ccUser != ""
        )
          viewurl = this.apipath + "/v1.0/flowemps/" + this.nodeproperty.strategy.ccUser;
        if (viewurl !== "") {
          reqVue.$Post(null, viewurl, this.way).then(
            function (data) {
              if (data.status) {
                if (this.nodeproperty.strategy.strategyType == 3) {
                  this.ccemps = [];
                  this.ccempconfig = [];
                  data.body.forEach((element) => {
                    this.ccemps.push(element.empId);
                    this.ccempconfig.push({
                      empId: element.empId,
                      cnName: element.cnName,
                      enName: element.enName,
                    });
                  });
                }
              } else {
                this.$message.error(data.message);
                this.formLoading = false;
              }
            }.bind(this)
          );
        }
      }
    },
    initForm() {
      if (
        this.nodeproperty.form != null &&
        this.nodeproperty.form != undefined &&
        this.nodeproperty.form.areas != undefined
      ) {
        this.formInfo = this.nodeproperty.form;
      } else {
        if (
          this.formInfo == undefined ||
          this.formInfo.areas === undefined ||
          this.formInfo.length <= 0
        ) {
          this.formLoading = true;
          let url =
            this.apipath +
            "/v1.0/stepfields/" +
            this.formversionid +
            "/" +
            this.flowversionid +
            "/" +
            this.nodeproperty.id;
          reqVue.$Post(null, url, this.way).then(
            function (data) {
              if (data.status) {
                this.formInfo = data.body;
                this.formLoading = false;
              } else {
                this.$message.error(data.message);
                this.formLoading = false;
              }
            }.bind(this)
          );
        }
      }
    },

    ///点击更新显示状态
    changFieldShow(ck) {
      if (!ck.show) {
        ck.editor = false;
        ck.required = false;
      }
    },
    ///点击更新显示编辑状态
    changFieldEdit(ck) {
      if (!ck.editor) ck.required = false;
    },
    dialogAddEmpEvent() {
      this.$refs.emp.paramters = {
        fieldKey: "defaultApprover",
        data: this.empconfig,
        exceptDataField: [],
      };
      this.$refs.emp.dialogEmpVisible = true;
      this.$refs.emp.InitData();
    },
    ///弹出框返回赋值
    dialogEmpConfirmEvent(res) {
      if (res.result.length > 0) {
        this.emps = [];
        this.empconfig = [];
        res.result.forEach((element) => {
          if (res.key !== "ccUser") {
            this.emps.push(element.empId);
            this.empconfig.push({
              empId: element.empId,
              cnName: element.cnName,
              enName: element.enName,
            });
          } else {
            this.ccemps.push(element.empId);
            this.ccempconfig.push({
              empId: element.empId,
              cnName: element.cnName,
              enName: element.enName,
            });
          }
        });
      }
    },
    dialogAddCCEmpEvent() {
      this.$refs.emp.paramters = {
        fieldKey: "ccUser",
        data: this.empconfig,
        exceptDataField: [],
      };
      this.$refs.emp.dialogEmpVisible = true;
      this.$refs.emp.InitData();
    },
    ///弹出范围选择框
    dialogAddPositionEvent() {
      this.$refs.pos.paramters = {
        fieldKey: "range",
        data: this.rangeConfigs,
        exceptDataField: [],
      };
      this.$refs.pos.dialogPosVisible = true;
      this.$refs.pos.InitData();
    },
    dialogPostConfirmEvent(res) {
      if (res.result.length > 0) {
        this.emps = [];
        this.empconfig = [];
        res.result.forEach((element) => {
          this.range.push(element.positionId);
          this.rangeConfigs.push({
            positionId: element.positionId,
            cnName: element.cnName,
            enName: element.enName,
          });
        });
      }
    },
    ///策略类型变更
    strategyTypeChange() {
      this.nodeproperty.strategy.approverType = 0;
      this.nodeproperty.strategy.sendParttimePostion = 0;
      this.nodeproperty.strategy.approveParttimePostion = 0;
      this.nodeproperty.strategy.formField = "";
      this.nodeproperty.strategy.formFieldApproveType = 0;
      this.nodeproperty.strategy.orgLeve = 0;
      this.showformFieldApproveType = false;
      this.emps = [];
      this.empconfig = [];
      this.range = [];
      this.rangeConfigs = [];
      if (
        this.nodeproperty.strategy.strategyType <= 9 &&
        this.nodeproperty.strategy.strategyType >= 7
      ) {
        this.initForm();
      }
    },
    ///人员类型变更
    approverTypeChange() {
      this.nodeproperty.strategy.sendParttimePostion = 0;
      this.nodeproperty.strategy.approveParttimePostion = 0;
      this.nodeproperty.strategy.orgLeve = 0;
    },
    formFieldTypeChange() {
      this.nodeproperty.strategy.sendParttimePostion = 0;
      this.nodeproperty.strategy.approveParttimePostion = 0;
      this.nodeproperty.strategy.orgLeve = 0;
      this.nodeproperty.strategy.formFieldApproveType = 0;
      if (this.nodeproperty.strategy.formField != "") {
        this.showformFieldApproveType = true;
        if (this.nodeproperty.strategy.strategyType == 7) {
          this.FieldApproveTypes = this.conf.strategy_current_field_personnal;
        }
        if (this.nodeproperty.strategy.strategyType == 8) {
          this.FieldApproveTypes = this.conf.strategy_current_field_orgs;
        }
        if (this.nodeproperty.strategy.strategyType == 9) {
          this.FieldApproveTypes = this.conf.strategy_current_field_poss;
        }
      }
    },
    formFieldApproveTypeChange() {
      this.nodeproperty.strategy.sendParttimePostion = 0;
      this.nodeproperty.strategy.approveParttimePostion = 0;
      this.nodeproperty.strategy.orgLeve = 0;
    },
    ccStrategyTypeChange() {
      this.nodeproperty.strategy.ccType = 0;
      this.nodeproperty.strategy.ccSendParttimePostion = 0;
      this.nodeproperty.strategy.ccApproveParttimePostion = 0;
      this.nodeproperty.strategy.ccFormField = "";
      this.nodeproperty.strategy.ccFormFieldApproveType = 0;
      this.nodeproperty.strategy.ccOrgLeve = 0;
      this.ccShowformFieldApproveType = false;
      this.ccemps = [];
      this.empccconfig = [];
      this.ccrange = [];
      this.rangeCCConfigs = [];
      if (
        this.nodeproperty.strategy.ccStrategyType <= 9 &&
        this.nodeproperty.strategy.ccStrategyType >= 7
      ) {
        this.initForm();
      }
    }, ///人员类型变更
    CCTypeChange() {
      this.nodeproperty.strategy.ccSendParttimePostion = 0;
      this.nodeproperty.strategy.ccApproveParttimePostion = 0;
      this.nodeproperty.strategy.ccOrgLeve = 0;
    },
    CCFormFieldTypeChange() {
      this.nodeproperty.strategy.ccSendParttimePostion = 0;
      this.nodeproperty.strategy.ccApproveParttimePostion = 0;
      this.nodeproperty.strategy.ccOrgLeve = 0;
      this.nodeproperty.strategy.ccFormFieldApproveType = 0;
      if (this.nodeproperty.strategy.ccFormField != "") {
        this.ccShowformFieldApproveType = true;
        if (this.nodeproperty.strategy.ccStrategyType == 7) {
          this.ccFieldApproveTypes = this.conf.strategy_current_field_personnal;
        }
        if (this.nodeproperty.strategy.ccStrategyType == 8) {
          this.ccFieldApproveTypes = this.conf.strategy_current_field_orgs;
        }
        if (this.nodeproperty.strategy.ccStrategyType == 9) {
          this.ccFieldApproveTypes = this.conf.strategy_current_field_poss;
        }
      }
    },
    CCFormFieldApproveTypeChange() {
      this.nodeproperty.strategy.ccSendParttimePostion = 0;
      this.nodeproperty.strategy.ccApproveParttimePostion = 0;
      this.nodeproperty.strategy.ccOrgLeve = 0;
    },
    ///显示
    changAreaShow(area) {
      if (!area.show) {
        area.fields.forEach((element) => {
          element.show = false;
          element.editor = false;
          element.required = false;
        });
        area.editor = false;
      }
    },
    ///区域编辑选择
    changAreaEdit(area) {
      if (!area.editor) {
        area.fields.forEach((element) => {
          element.editor = false;
          element.required = false;
        });
      }
    },
    InitBranchLines() {
      this.branchs.forEach((element) => {
        if (
          element.value !== this.nodeproperty.meta.stepId &&
          element.tag != null &&
          element.tag != ""
        ) {
          const parallelTask = this.newLines.filter((o) => o.startId === element.value);
          if (parallelTask !== undefined && parallelTask !== null) {
            parallelTask.forEach((ele) => {
              this.branchLines.push({
                label: `${element.label}(${element.tag})-${ele.meta.cnName}(${ele.meta.branchTag})`,
                value: `${element.line || ""}$${element.tag || ""}#${ele.meta.branchTag}`,
              });
            });
          }
        }
      });
    },
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    setTimeout(() => {
      this.InitBtn();
      this.InitBranchLines();
    }, 100);
  },
  components: {
    Draggable,
    DialogEmployeeComponetVue,
    DialogPositionComponetVue,
  },
};
</script>
